<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/layui/lib/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="/layui/lib/layui.js"></script>
    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/Sortablemin.js"></script>
    <style class="text/css">
        #leftNav{
            border: 1px solid #ccc;
            min-height: 600px;
        }

        #designArea{
            border: 1px solid #ccc;
            margin-left: 8px;
            min-height: 600px;
        }

        .ctrlItem{
            min-width: 60px;
            min-height: 20px;
        }

        .ctrlItemInfo{
            border: 1px solid #000;
        }

        .canPut{

        }

        .canPull{

        }

        .minHeight{

        }

        .ctrlItemOver{
            border: 1px solid #000;
            margin: 4px;
        }

        .ctrlItemClick{
            border: 2px solid #ccc;
        }

    </style>
</head>
<body>


    <blockquote class="layui-elem-quote">自定义表单 v0.2</blockquote>
    

<div class="layui-row">
    <div class="layui-col-md1 " id="leftNav">
        <button class="ctrl ctrlButton">按钮</button>
        <button class="ctrl ctrlDiv">容器</button>
        <button class="ctrl ctrlLayuiRow">Layui行</button>
    </div>
    <div class="layui-col-md11">
        
        <div class="layui-row">设计区</div>
        <div class="layui-row" id="elemInfo"></div>
        <div class="layui-row" style="padding: 10px;">
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnSetCtrlProp">设置属性</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnDelete">删除</button>
        </div>
        <div id="designArea" class="layui-form ctrlItem canPut" adf-ctrl="layuiForm">

           
        </div>
        <div>
            <div class="layui-row">
                <textarea class="layui-textarea" id="ctrlDefine">

                </textarea>
            </div>
            <div class="layui-row"><button class="layui-btn" id="btnSaveCtrlDefine">保存定义</button></div>

            <div class="layui-row">
                <textarea class="layui-textarea" id="resultHtml">

                </textarea>
            </div>
            
        </div>


    </div>
</div>

<script type="text/html" id="divTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <div class="layui-colla-item">
          <div class="layui-colla-title">基本信息</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>id</td>
                    <td><input class="layui-input" value="{{=d.ctrl.id}}" /></td>
                </tr>
                <tr>
                    <td>控件类型</td>
                    <td><input class="layui-input" value="{{=d.ctrl.ctrlType}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>name:</td>
                    <td><input id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>placeholder:</td>
                    <td><input id="placeholder" value="{{=d.ctrl.placeholder}}" /></td>
                </tr>
                <tr>
                    <td>验证规则:</td>
                    <td><input id="layVerify" value="{{=d.ctrl.layVerify}}" /></td>
                </tr>
                <tr>
                    <td>验证提示:</td>
                    <td><input id="layVertype" value="{{=d.ctrl.layVertype}}" /></td>
                </tr>
                <tr>
                    <td>忽略渲染?:</td>
                    <td><input id="layIgnore" value="{{=d.ctrl.layIgnore}}" /></td>
                </tr>

            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiDatetimeTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <div class="layui-colla-item">
          <div class="layui-colla-title">基本信息</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>id</td>
                    <td><input class="layui-input" value="{{=d.ctrl.id}}" /></td>
                </tr>
                <tr>
                    <td>控件类型</td>
                    <td><input class="layui-input" value="{{=d.ctrl.ctrlType}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>name:</td>
                    <td><input id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>placeholder:</td>
                    <td><input id="placeholder" value="{{=d.ctrl.placeholder}}" /></td>
                </tr>
                <tr>
                    <td>验证规则:</td>
                    <td><input id="layVerify" value="{{=d.ctrl.layVerify}}" /></td>
                </tr>
                <tr>
                    <td>验证提示:</td>
                    <td><input id="layVertype" value="{{=d.ctrl.layVertype}}" /></td>
                </tr>
                <tr>
                    <td>忽略渲染?:</td>
                    <td><input id="layIgnore" value="{{=d.ctrl.layIgnore}}" /></td>
                </tr>

            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>
<script type="text/html" id="layuiInputTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <div class="layui-colla-item">
          <div class="layui-colla-title">基本信息</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>id</td>
                    <td><input class="layui-input" value="{{=d.ctrl.id}}" /></td>
                </tr>
                <tr>
                    <td>控件类型</td>
                    <td><input class="layui-input" value="{{=d.ctrl.ctrlType}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>name:</td>
                    <td><input id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>placeholder:</td>
                    <td><input id="placeholder" value="{{=d.ctrl.placeholder}}" /></td>
                </tr>
                <tr>
                    <td>验证规则:</td>
                    <td><input id="layVerify" value="{{=d.ctrl.layVerify}}" /></td>
                </tr>
                <tr>
                    <td>验证提示:</td>
                    <td><input id="layVertype" value="{{=d.ctrl.layVertype}}" /></td>
                </tr>
                <tr>
                    <td>忽略渲染?:</td>
                    <td><input id="layIgnore" value="{{=d.ctrl.layIgnore}}" /></td>
                </tr>

            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>
<script type="text/html" id="layuiButtonTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <div class="layui-colla-item">
          <div class="layui-colla-title">基本信息</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>id</td>
                    <td><input class="layui-input" value="{{=d.ctrl.id}}" /></td>
                </tr>
                <tr>
                    <td>控件类型</td>
                    <td><input class="layui-input" value="{{=d.ctrl.ctrlType}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>标题:</td>
                    <td><input id="caption" value="{{=d.ctrl.caption}}" /></td>
                </tr>
                <tr>
                    <td>主题</td>
                    <td>
                        <select id="theme">
                            {{#  layui.each(d.themeList, function(index, item){ }}
                                <option value="{{=item.value}}" {{#  if(d.ctrl.theme === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>边框</td>
                    <td>
                        <select id="border">
                            {{#  layui.each(d.borderList, function(index, item){ }}
                            <option value="{{=item.value}}" {{#  if(d.ctrl.border === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>尺寸</td>
                    <td>
                        <select id="size">
                            {{#  layui.each(d.sizeList, function(index, item){ }}
                            <option value="{{=item.value}}" {{#  if(d.ctrl.size === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiRowTpl">
    <div class="layui-collapse" lay-filter="tplInfo">
        <div class="layui-colla-item">
          <div class="layui-colla-title">基本信息</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>id</td>
                    <td><input class="layui-input" value="{{=d.ctrl.id}}" /></td>
                </tr>
                <tr>
                    <td>控件类型</td>
                    <td><input class="layui-input" value="{{=d.ctrl.ctrlType}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>当前列数</td>
                    <td><input class="layui-input" value="{{=d.colNum}}" /></td>
                </tr>
                <tr>
                    <td>操作</td>
                    <td><button class="layui-btn layui-btn-xs btnAddSetup" id="layuiRowAddCol">增加列</button></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>无</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiRowColTpl">
    <div class="layui-collapse" lay-filter="tplInfo">
        <div class="layui-colla-item">
          <div class="layui-colla-title">基本信息</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>id</td>
                    <td><input class="layui-input" value="{{=d.ctrl.id}}" /></td>
                </tr>
                <tr>
                    <td>控件类型</td>
                    <td><input class="layui-input" value="{{=d.ctrl.ctrlType}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>列宽</td>
                    <td>
                        <select id="mdNum">
                            {{#  layui.each(d.mdNumList, function(index, item){ }}
                                <option value="{{=item.value}}" {{#  if(d.ctrl.theme === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>无</p>
            </div>
          </div>
      
      </div>
</script>


    <script>
        var util = {
            getHtmlAttr : function(attrMap){
                var strInfo = "";
                $.each(attrMap,function(i,item){
                    strInfo += item.key +"=\"" + item.value + "\" ";
                });

                if(strInfo !== ""){
                    strInfo = strInfo.substr(0, strInfo.length - 1);
                }

                return strInfo;
            },
            getHtmlAttr : function(attrObj){
                
                console.log("attrObj",attrObj);
                var attrInfo = "";
                var classInfo = "";
                var styleInfo = "";
                var attrList = {style:"",class:""};
                
                for(var key in attrObj){

                    var value = attrObj[key];

                    if(key === "class"){
                        
                        var arrClass = attrObj.class.split(",");

                        $.each(arrClass,function(i,tmpClass){
                            if(tmpClass === "undefined" || tmpClass === ""){
                                return true;
                            }

                            if(classInfo.indexOf(tmpClass+" ") === -1){
                                classInfo +=tmpClass + " ";
                            }
                        });

                        attrList.class = classInfo.trim();
                    } else if (key === "style"){

                        for(var tmpKey in attrObj.style){
                            styleInfo += tmpKey + ":" + attrObj.style[tmpKey] +";"
                        }
                        attrInfo.style = styleInfo;
                        
                    } else {
                        attrList[key] = value;
                    }
                }

                var ret = "";
                for(var key in attrList){
                    var value = attrList[key];
                    if(attrList[key] !== ""){
                        ret += key + "=\"" + value + "\" ";
                    }
                }

                return ret;
            }
        }


        var ctrlMaxId = 0;

        var stdCtrlList =[
            {
                ctrlName:"按钮",
                ctrlType:"button"
            },

            {
                ctrlName:"容器",
                ctrlType:"div"
            },
            {
                ctrlName:"Layui标签",
                ctrlType:"layuiFormLabel"
            },
            {
                ctrlName:"layui行",
                ctrlType:"layuiRow"
            },
            {
                ctrlName:"layui行列",
                ctrlType:"layuiRowCol"
            },
            {
                ctrlName:"layui表单行",
                ctrlType:"layuiFormItem"
            },
            {
                ctrlName:"layui输入框",
                ctrlType:"layuiInput"
            },
            {
                ctrlName:"layui卡片",
                ctrlType:"layuiCard"
            },
            {
                ctrlName:"layui进度条",
                ctrlType:"layuiProgress"
            },
            {
                ctrlName:"layui日期",
                ctrlType:"layuiDatetime"
            },
            {
                ctrlName:"layui徽章",
                ctrlType:"layuiBadge"
            },
            {
                ctrlName:"图片",
                ctrlType:"img"
            },
            {
                ctrlName:"layui按钮",
                ctrlType:"layuiButton"
            },
            {
                ctrlName:"layui下拉框",
                ctrlType:"layuiSelect"
            },
            {
                ctrlName:"layui多行文本",
                ctrlType:"layuiTextarea"
            },
            {
                ctrlName:"layui多选框",
                ctrlType:"layuiCheckboxGroup"
            },
            {
                ctrlName:"layui单选框",
                ctrlType:"layuiRadioGroup"
            },
            {
                ctrlName:"layui静态表格",
                ctrlType:"layuiTable"
            },
            {
                ctrlName:"layui表格单元格",
                ctrlType:"layuiTableCell"
            },
            {
                ctrlName:"layui选项卡",
                ctrlType:"layuiTab"
            },
            {
                ctrlName:"layui数据表格",
                ctrlType:"layuiDataTable"
            },
        ];

        var ayCtrl = {
            childPropList:"form,layuiForm,div,layuiTabItem,layuiRowCol,",
            itemPropList:"layuiTab",
            colsPropList:"layuiRow",
            ctrlDefine:[
                {
                    ctrlType:"button",
                    id:"",
                    class:"",
                    events:[],
                    caption:"按钮"
                },
                {
                    ctrlType:"div",
                    id:"",
                    class:"",
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"form",
                    id:"",
                    class:"",
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiButton",
                    id:"",
                    class:"",
                    events:[],
                    caption:"按钮"
                },
                {
                    ctrlType:"layuiInput",
                    id:"",
                    class:"",
                    name:"",
                    value:"",
                    layIgnore:"",
                    layVerify:"",
                    layFilter:"",
                    layVertype:"",
                    placeholder:"请输入文字",
                    events:[]
                },
                {
                    ctrlType:"layuiCard",
                    id:"",
                    class:"",
                    header:{
                        ctrlType:"layuiCardHeader",
                        id:"",
                        class:"",
                        events:[],
                        childs:[]
                    },
                    body:{
                        ctrlType:"layuiCardBody",
                        id:"",
                        class:"",
                        events:[],
                        childs:[]
                    },
                    events:[]
                },
                {
                    ctrlType:"layuiCardHeader",
                    id:"",
                    class:"",
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiCardBody",
                    id:"",
                    class:"",
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiProgress",
                    id:"",
                    class:"",
                    events:[]
                },
                {
                    ctrlType:"layuiDatetime",
                    id:"",
                    class:"",
                    name:"",
                    value:"",
                    layIgnore:"",
                    layVerify:"",
                    layFilter:"",
                    layVertype:"",
                    placeholder:"请输入文字",
                    events:[]
                },
                {
                    ctrlType:"layuiBadge",
                    id:"",
                    class:"",
                    caption:"1",
                    events:[]
                },
                {
                    ctrlType:"img",
                    id:"",
                    class:"",
                    title:"",
                    src:"",
                    alt:"图片",
                    events:[]
                },
                {
                    ctrlType:"layuiFormLabel",
                    id:"",
                    class:"",
                    caption:"Form标签",
                    events:[]
                },
                {
                    ctrlType:"layuiTextarea",
                    id:"",
                    class:"",
                    name:"",
                    placeholder:"请输入文字",
                    events:[]
                },
                {
                    ctrlType:"layuiRow",
                    id:"",
                    class:"",
                    events:[],
                    cols:[
                        {
                            ctrlType:"layuiRowCol",
                            id:"",
                            class:"",
                            mdNum:1,
                            events:[],
                            childs:[]
                        },
                    ]
                },
                {
                    ctrlType:"layuiInputBlock",
                    id:"",
                    class:"",
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiFormItem",
                    id:"",
                    class:"",
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiRowCol",
                    id:"",
                    class:"",
                    colNum:4,
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiTab",
                    id:"",
                    class:"",
                    events:[],
                    items:[{
                        ctrlType:"layuiTabItem",
                        id:"",
                        class:"",
                        caption:"选项1",
                        selected:true,
                        events:[],
                        childs:[]
                    }]
                },
                {
                    ctrlType:"layuiTabItem",
                    id:"",
                    class:"",
                    caption:"选项1",
                    selected:true,
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiSelect",
                    id:"",
                    name:"",
                    class:"",
                    layFilter:"",
                    events:[],
                    items:[{name:"选项1",value:"选项1"},{name:"选项2",value:"选项2"}]
                },
                {
                    ctrlType:"layuiCheckboxGroup",
                    id:"",
                    name:"",
                    class:"",
                    laySkin:"none",
                    events:[],
                    items:[{title:"选项1"},{title:"选项2"}]
                },
                {
                    ctrlType:"layuiRadioGroup",
                    id:"",
                    name:"",
                    class:"",
                    laySkin:"none",
                    events:[],
                    items:[{title:"选项1"},{title:"选项2"}]
                },
                {
                    ctrlType:"layuiTable",
                    id:"",
                    rowNum:2,
                    colNum:3,
                    class:"",
                    laySkin:"none",
                    events:[],
                    items:[]
                },
                {
                    ctrlType:"layuiTableCell",
                    id:"",
                    class:"",
                    width:"",
                    events:[],
                    childs:[]
                },
                {
                    ctrlType:"layuiDataTable",
                    id:"",
                    data:"",
                    class:"",
                    laySkin:"none",
                    events:[],
                    items:[]
                },
            ],
            getCtrlDefine:function(type){

                var entity ;
                $.each(ayCtrl.ctrlDefine,function(i,item){
                    if(item.ctrlType === type){
                        entity = $.extend({},item);
                        return false;
                    }
                });

                console.log("当前的结构是",entity);
                return entity;
            },
            getNewCtrlId : function(){
                ctrlMaxId++;
                return "el" + ctrlMaxId;
            },
            //根据类型得到通用的属性
            // 这里还有子属性，比如字体，颜色 等属性还有
            // 去除其他
            getCommonHtmlAttr: function(define,extName){
                if(typeof(define) === "undefined"){
                    return "";
                }

                if(typeof(extName) === "undefined"){
                    extName = "";
                }

                var arrExtName = extName.split(",");

                var attrInfo = "";

                var classInfo="";
                console.log("commhtml attr",define);
                if(define.hasOwnProperty("class")){
                    console.log("commhtml attr has class");
                    classInfo = define.class;
                    if(classInfo.length > 0){
                        classInfo +=" ctrlItem";
                    }
                    else{
                        classInfo = "ctrlItem";
                    }
                    console.log("commhtml attr has classInfo",classInfo);
                    var canPutList = "div, form, layuiForm,layuiRow, layuiRowCol, layuiTabItem,layuiFormItem,layuiTableCell,layuiCardHeader,layuiCardBody,Ctrl";
                    if(canPutList.indexOf(define.ctrlType+",") > -1){
                        classInfo +=" canPut"
                    }
                }

                if(classInfo.length > 0){
                    classInfo = "class=\"" + classInfo + "\"";
                }
                console.log("commhtml attr has classInfo",classInfo);
                // classInfo 独立处理

                // 其他属性处理
                var htmlAttrList = "id,class,name,lay-filter,src,alt,title,href"
                for(var key in define){
                    if(key !== "class" && typeof(define[key]) !=="object"){
                        if(htmlAttrList.indexOf(key+",") > -1){
                            if(arrExtName.indexOf(key) === -1){
                                attrInfo += key+"=\"" + define[key] + "\" ";
                            }
                            
                        }
                    }
                }

                attrInfo +=" " + classInfo;
                console.log("commhtml attr has attrInfo",attrInfo);

                return attrInfo;

            },
            renderCtrl:function(define){
                //console.log("define",define);


            },
            getButton:function(config){
                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                var caption = config.caption;
                if(typeof(caption) === "undefined"){
                    caption = "按钮";
                }

                var html = "<button "+attrInfo+" adf-ctrl=\"button\">"+caption+"</button>";
                return html;
            },
            getDiv:function(config){
                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                var html = "<div "+attrInfo+" adf-ctrl=\"div\"></div>";
                return html;
            },
            getLayuiForm:function(config){

                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-form" + classInfo;
                }
                else{
                    config.class = "layui-form";
                }

                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                var html = "<div "+attrInfo+" adf-ctrl=\"layuiForm\"></div>";
                return html;
            },
            getLayuiFormLabel:function(config){
                var attrObj ={};
                attrObj["adf-ctrl"] = "layuiFormLabel";
                attrObj.id = config.id;
                attrObj.class = "layui-form-label,ctrlItem," + config.class

                

                var caption = config.caption;
                if(typeof(caption) === "undefined"){
                    caption = "";
                }

                var attrInfo = util.getHtmlAttr(attrObj);
                var html = "<label "+attrInfo+">"+caption+"</label>";
                return html;
            },
            getLayuiFormItem:function(config){

                var attrObj ={};
                attrObj["adf-ctrl"] = "layuiFormItem";
                attrObj.id = config.id;
                attrObj.class = "layui-form-item,ctrlItem,canPut," + config.class

                var attrInfo = util.getHtmlAttr(attrObj);

                var html = "<div "+attrInfo+"></div>";
                return html;
            },
            getLayuiRow:function(config){

                
                var attrObj ={};
                attrObj["adf-ctrl"] = "layuiRow";
                attrObj.id = config.id;
                attrObj.class = "layui-row,ctrlItem," + config.class;

                var attrInfo = util.getHtmlAttr(attrObj);
                var pre = "<div "+attrInfo+">";
                var cols = "";
                $.each(config.cols,function(i,item){
                    cols += ayCtrl.getLayuiRowCol(item);
                });
                var suffix = "</div>";
                var html = pre + cols + suffix;
                return html;
            },
            getLayuiRowCol:function(config){
                
                var mdNum = config.mdNum;
                var attrObj ={};
                attrObj["adf-ctrl"] = "layuiRowCol";
                attrObj.id = config.id;
                attrObj.class = "layui-col-md"+mdNum+",ctrlItem,canPut," + config.class;

                var attrInfo = util.getHtmlAttr(attrObj);
                var html = "<div "+attrInfo+"></div>";
                return html;
            },
            getLayuiInput:function(config){

                var attrObj ={};
                attrObj["adf-ctrl"] = "layuiInput";
                attrObj.id = config.id;
                attrObj.name = config.name;
                attrObj.value = config.value;
                attrObj["lay-ignore"] = config.layIgnore;
                attrObj["lay-vertype"] = config.layVertype;
                attrObj["lay-verify"] = config.layVerify;
                attrObj["lay-filter"] = config.layFilter;
                attrObj.placeholder = config.placeholder;
                
                attrObj.class = "layui-input,ctrlItem"

                var attrInfo = util.getHtmlAttr(attrObj);
                
                var html = "<input "+attrInfo+" />";
                return html;
            },
            getLayuiCard:function(config){

                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-card " + classInfo;
                }
                else{
                    config.class = "layui-card";
                }


                var attrInfo = ayCtrl.getCommonHtmlAttr(config);

                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiCard\">";
                var header = ayCtrl.getLayuiCardHeader(config.header);
                var body = ayCtrl.getLayuiCardBody(config.body);
                var suffix = "</div>";
                var html = pre + header + body + suffix;
                return html;
            },
            getLayuiCardHeader:function(config){
                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-card-header " + classInfo;
                }
                else{
                    config.class = "layui-card-header";
                }
                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                
                var html = "<div "+attrInfo+" adf-ctrl=\"layuiCardHeader\" ></div>";
                return html;
            },
            getLayuiCardBody:function(config){
                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-card-body " + classInfo;
                }
                else{
                    config.class = "layui-card-body";
                }
                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                
                var html = "<div "+attrInfo+" adf-ctrl=\"layuiCardBody\" ></div>";
                return html;
            },
            getLayuiProgress:function(config){

                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-progress " + classInfo;
                }
                else{
                    config.class = "layui-progress";
                }

                var attrInfo = ayCtrl.getCommonHtmlAttr(config);

                //进度
                var percent = "50%";
                if(typeof(config.percent) !=="undefined"){
                    percent = config.percent;
                }

                // 进度条颜色
                var bgColor = "layui-bg-blue";
                if(typeof(config.bgColor) !=="undefined"){
                    bgColor = config.bgColor;
                }

                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiProgress\">";
                var bar = "<div class=\"layui-progress-bar "+bgColor+"\"  lay-percent=\""+percent+"\"></div>";
                var suffix = "</div>"
                var html = pre + bar + suffix;
                return html;
            },
            getLayuiDatetime:function(config){
                var attrObj ={};
                attrObj["adf-ctrl"] = "layuiDatetime";
                attrObj.id = config.id;
                attrObj.name = config.name;
                attrObj.value = config.value;
                attrObj["lay-ignore"] = config.layIgnore;
                attrObj["lay-vertype"] = config.layVertype;
                attrObj["lay-verify"] = config.layVerify;
                attrObj["lay-filter"] = config.layFilter;
                attrObj.placeholder = config.placeholder;
                
                attrObj.class = "layui-input,ctrlItem"

                var attrInfo = util.getHtmlAttr(attrObj);
                
                var html = "<input "+attrInfo+" />";
                return html;
            },
            getLayuiBadge:function(config){
                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-badge " + classInfo;
                }
                else{
                    config.class = "layui-badge";
                }

                var caption = config.caption;
                if(typeof(caption) === "undefined"){
                    caption = "";
                }

                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                var html = "<span "+attrInfo+" adf-ctrl=\"layuiBadge\">"+caption+"</span>";
                return html;
            },
            getImg:function(config){
                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                
                var html = "<img "+attrInfo+" adf-ctrl=\"img\" />";
                return html;
            },
            getLayuiButton:function(config){


                var attrObj ={};
                attrObj["adf-ctrl"] = "layuiButton";
                attrObj.id = config.id;
                attrObj.class = "layui-btn,ctrlItem," + config.theme +"," + config.border + "," + config.size;
                //attrObj.class += ",ctrlItem";
                

                var caption = config.caption;
                if(typeof(caption) === "undefined"){
                    caption = "";
                }
                var attrInfo = util.getHtmlAttr(attrObj);
                
                var html = "<button "+attrInfo+" adf-ctrl=\"layuiButton\" >"+caption+"</button>";
                return html;
            },
            getLayuiTextarea:function(config){
                
                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-textarea " + classInfo;
                }
                else{
                    config.class = "layui-textarea";
                }

                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                var pre = "<textarea "+attrInfo+" adf-ctrl=\"layuiTextarea\" >";
                var suffix = "</textarea>";
                var html = pre + suffix;
                return html;
            },
            getLayuiSelect:function(config){
                var attrInfo = ayCtrl.getCommonHtmlAttr(config,"layFilter,name");
                var layFilter = "";
                if(typeof(config.layFilter) !== "undefined" && config.layFilter !== ""){
                    layFilter = "lay-filter=\"" + config["layFilter"] +"\"";
                }
                var name = "";
                if(typeof(config.name) !== "undefined" && config.name !== ""){
                    layFilter = "name=\"" + config.name +"\"";
                }

                var selectExtInfo = layFilter;
                if(selectExtInfo != "" ){
                    if(name != ""){
                        selectExtInfo += " " + name;
                    }
                }
                else{
                    selectExtInfo = name;
                }

                if(selectExtInfo != ""){
                    selectExtInfo = " " + selectExtInfo;
                }


                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiSelect\"><select"+selectExtInfo+">";
                var items = "";
                if(typeof(config.items) !== "undefined"){
                    $.each(config.items,function(i,item){
                        items += "<option value="+item.value+">"+item.name+"</option>" 
                    });
                }
                var suffix = "</select></div>";

                var html = pre + items + suffix;
                return html;
            },
            getLayuiCheckboxGroup:function(config){
                var attrInfo = ayCtrl.getCommonHtmlAttr(config,"name");
                
                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiCheckboxGroup\">";
                var items = "";
                if(typeof(config.items) !== "undefined"){
                    $.each(config.items,function(i,item){
                        var checkedInfo = "";
                        if(item.checked){
                            checkedInfo ="checked";
                        }
                        var valueInfo="";
                        if(typeof(item.value) !=="undefined"){
                            valueInfo = " value=\""+item.value+"\"";
                        }

                        var layFilterInfo = "";
                        if(typeof(item.layFilter) !=="undefined"){
                            valueInfo = " lay-filter=\""+item.layFilter+"\"";
                        }

                        var laySkin = "";
                        if(typeof(item.laySkin) !=="undefined"){
                            valueInfo = " lay-skin=\""+item.laySkin+"\"";
                        }

                        items += "<input type=\"checkbox\" name=\""+name+"\" title="+item.title+""+checkedInfo+valueInfo+" />";
                    });
                }
                var suffix = "</div>";

                var html = pre + items + suffix;
                return html;
            },
            getLayuiRadioGroup:function(config){
                var attrInfo = ayCtrl.getCommonHtmlAttr(config,"name");
                var name = config.name;
                
                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiRadioGroup\">";
                var items = "";
                if(typeof(config.items) !== "undefined"){
                    $.each(config.items,function(i,item){
                        var checkedInfo = "";
                        if(item.checked){
                            checkedInfo ="checked";
                        }
                        var valueInfo="";
                        if(typeof(item.value) !=="undefined"){
                            valueInfo = " value=\""+item.value+"\"";
                        }

                        var layFilterInfo = "";
                        if(typeof(item.layFilter) !=="undefined"){
                            valueInfo = " lay-filter=\""+item.layFilter+"\"";
                        }

                        var laySkin = "";
                        if(typeof(item.laySkin) !=="undefined"){
                            valueInfo = " lay-skin=\""+item.laySkin+"\"";
                        }

                        items += "<input type=\"radio\" name=\""+name+"\" title="+item.title+""+checkedInfo+valueInfo+" />";
                    });
                }
                var suffix = "</div>";

                var html = pre + items + suffix;
                return html;
            },
            getLayuiTable:function(config){
                
                //根据行列得到单元格
                function findCell(rowIndex, colIndex){
                    var entity = config.items.find(x=>{return x.rowIndex === rowIndex && x.colIndex===colIndex});
                    return entity;
                }


                var attrInfo = ayCtrl.getCommonHtmlAttr(config,"rowNum,colNum");
                var rowNum = config.rowNum;
                var colNum = config.colNum;
                
                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiTable\"><table class=\"layui-table\">";
                
                var rows = "";
                for(var i=0; i<rowNum; i++){
                    var row="<tr>";
                    for(var j=0; j<colNum; j++){
                        var cell = findCell(i, j);
                        row += ayCtrl.getLayuiTableCell(cell)    
                    }
                    row += "</tr>";
                    rows += row;
                }

                var suffix = "</table></div>";

                var html = pre + rows + suffix;
                return html;
            },
            getLayuiDataTable:function(config){
                
                var attrInfo = ayCtrl.getCommonHtmlAttr(config,"data,url,");
                
                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiTable\"><table id=\"table_"+config.id+"\" lay-filter=\"table_"+config.id+"\" class=\"layui-hide\">";
                
                var suffix = "</table></div>";

                var html = pre + suffix;
                return html;
            },
            getLayuiTableCell:function(config){
                console.log("getLayuiTableCell config",config);
                var attrInfo = ayCtrl.getCommonHtmlAttr(config,"");
                
                var pre = "<td "+attrInfo+" adf-ctrl=\"layuiTableCell\">";
                var suffix = "</td>";

                var html = pre + suffix;
                return html;
            },
            getLayuiTabItem:function(config){
                console.log("getLayuiTabItem",config);
                var classInfo = "layui-tab-item";

                if(config.selected){
                    classInfo = classInfo + " layui-show";
                }

                classInfo += " " + config.class;

                var attrInfo = ayCtrl.getCommonHtmlAttr(config);
                var html = "<div "+attrInfo+" adf-ctrl=\"layuiTabItem\"></div>";
                return html;
            },
            getLayuiTab:function(config){

                var classInfo = config.class;
                if(classInfo !== ""){
                    config.class = "layui-tab " + classInfo;
                }
                else{
                    config.class = "layui-tab";
                }

                var attrInfo = ayCtrl.getCommonHtmlAttr(config);

                var pre = "<div "+attrInfo+" adf-ctrl=\"layuiTab\">";

                //构造title的头部
                var tabtitlePre = "<ul class=\"layui-tab-title\">";
                var tabtitlesItems = "";
                var index=0;
                $.each(config.items,function(i,item){
                    var selectedInfo = "";
                    if(item.selected){
                        selectedInfo = "class=\"layui-this\"";
                    }
                    var layId = index++;
                    tabtitlesItems += "<li "+selectedInfo+" lay-id=\""+layId+"\">"+item.caption+"</li>";
                });
                var tabtitleSuffix = "</ul>"

                var tabtitleHtml = tabtitlePre + tabtitlesItems + tabtitleSuffix;


                // body部分
                var tabContentPre = "<div class=\"layui-tab-content\">";
                var tabContentItems = "";
                var index=0;
                $.each(config.items,function(i,item){
                    
                    tabContentItems = ayCtrl.getLayuiTabItem(item);
                });
                var tabContentSuffix = "</div>"

                var tabContentHtml = tabContentPre + tabContentItems + tabContentSuffix;

                var suffix = "</div>"
                var html = pre + tabtitleHtml + tabContentHtml + suffix;
                return html;
            }
            

        };
    
    var ayForm = {

        selectedElemId:"",
        selectedCtrlDefine :{},
        CtrlList:[],
        formStruct:{id:"designArea",ctrlType:"layuiForm",childs:[]},
        // 返回对象以及当前的路径
        getCtrlObjectById : function(id){
            //通过递归的方式换到控件json对象
            function doFind(obj,targetId){
                for (var key in obj) {
                    if (key === "id") {
                        if (obj.id === targetId) {
                            return obj;
                        }
                    }

                    if (typeof obj[key] === "object" && obj[key] !== null) {
                            var result = doFind(obj[key], targetId);
                            if (result) {
                                return result;
                            }
                    }
                }
                return null;
            }
            var obj = doFind(ayForm.formStruct,id);
            return obj;
        },
        deleteCtrlObjectById : function(id){
            //通过递归的方式换到控件json对象
            function deleteById(obj, targetId) {
                for (let key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        if (typeof obj[key] === 'object' && obj[key] !== null) {
                            // 递归处理嵌套对象
                            deleteById(obj[key], targetId);

                            // 如果嵌套对象被清空，删除父对象的键
                            if (Object.keys(obj[key]).length === 0) {
                                delete obj[key];
                            }
                        } else if (key === 'id' && obj[key] === targetId) {
                            // 如果当前对象是目标对象，删除它
                            delete obj[key];
                            console.log("已经删除了");
                            console.log(ayForm.formStruct);
                        }
                    }
                    }
            }
            deleteById(ayForm.formStruct,id);
        },
        //开始初始化
        init:function(){
            // 初始化左侧
            new Sortable(document.getElementById('leftNav'), {
                group: {
                    name: 'shared', // 组名
                    pull: "clone",     // 允许拖出元素
                    put: false       // 允许放入元素
                },
                sort:false,
                animation: 150,

            }); 

            this.initLefNavCtrl();
            this.initDesignSortable();
            this.initCtrlSort();
            this.initEvent();

        },

        initLefNavCtrl:function(){
            $("#leftNav").html("");
            $(stdCtrlList).each(function(i,item){
                var button = "<button class=\"ctrl "+item.ctrlType+"\" ctrl-type=\""+item.ctrlType+"\">"+item.ctrlName+"</button>";
                $("#leftNav").append(button);
            });
        },

        setCtrlProp : function(ctrl){

            if($("#"+ctrl.ctrlType+"Tpl").length === 0){
                layer.msg("模板不存在");
                return;
            }

            var ctrlType = ctrl.ctrlType;

            var objData = {};
            objData.ctrl = ctrl;

            if(ctrlType === "layuiButton"){
                objData.themeList = [
                    {caption:"默认",value:""}
                    ,{caption:"蓝色",value:"layui-bg-blue"}
                    ,{caption:"橙色",value:"layui-bg-orange"}
                    ,{caption:"红色",value:"layui-bg-red"}
                    ,{caption:"紫色",value:"layui-bg-purple"}
                    ,{caption:"禁用",value:"layui-btn-disabled"}
                ];
                objData.borderList = [
                    {caption:"普通",value:"layui-border"}
                    ,{caption:"主色",value:"layui-border-green"}
                    ,{caption:"蓝色",value:"layui-border-blue"}
                    ,{caption:"橙色",value:"layui-border-orange"}
                    ,{caption:"红色",value:"layui-border-red"}
                    ,{caption:"紫色",value:"layui-border-purple"}
                ];
                objData.sizeList = [
                    {caption:"默认",value:""}
                    ,{caption:"大",value:"layui-btn-lg"}
                    ,{caption:"小",value:"layui-btn-sm"}
                    ,{caption:"迷你",value:"layui-btn-xs"}
                ];
            }

            if(ctrlType === "layuiRow"){
                //
            }

            if(ctrlType === "layuiRowCol"){
                //
                objData.mdNumList = [
                    {caption:"1",value:"1"}
                    ,{caption:"2",value:"2"}
                    ,{caption:"3",value:"3"}
                    ,{caption:"4",value:"4"}
                    ,{caption:"5",value:"5"}
                    ,{caption:"6",value:"6"}
                    ,{caption:"7",value:"7"}
                    ,{caption:"8",value:"8"}
                    ,{caption:"9",value:"9"}
                    ,{caption:"10",value:"10"}
                    ,{caption:"11",value:"11"}
                    ,{caption:"12",value:"12"}
                ];
            }

            var tplContent = "<div id=\"globalProp\">";
            tplContent += $("#"+ctrlType+"Tpl").html();
            tplContent += "<div class=\"layui-row\"><button class=\"layui-btn\" id=\"btnSaveCtrlProp\">保存</button></div>";
            tplContent += "</div>";

            console.log("objData",objData);
            var retHtml = layui.laytpl(tplContent).render(objData);

            layer.open({
                type: 1,
                title:"控件属性配置",
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                area: ['600px', '100%'],
                shade: 0.1,
                shadeClose: true,
                content: retHtml,
                success: function(layero, index, that){
                    console.log("成功打开");
                    
                    var element = layui.element;
                    layui.form.render("select");
                    element.render('collapse', "tplInfo");
                    
                }
            });
        },

        /**
            根据配置保存控件，并对form表单进行渲染
        */
        saveCtrlProp: function(ctrlDefine){

            console.log("saveCtrlProp ctrlDefine",ctrlDefine);
            var ctrlType = ctrlDefine.ctrlType;
            var ctrlId = ctrlDefine.id;

            //根据控件类型，生成对应的html
            if(ctrlType === "layuiButton"){
                var html = ayCtrl.getLayuiButton(ctrlDefine)
                $("#" + ayForm.selectedElemId ).after(html).remove();
            } else if(ctrlType === "layuiInput"){
                var html = ayCtrl.getLayuiInput(ctrlDefine)
                $("#" + ayForm.selectedElemId ).after(html).remove();
            }else if(ctrlType === "layuiDatetime"){
                var html = ayCtrl.getLayuiDatetime(ctrlDefine)
                $("#" + ayForm.selectedElemId ).after(html).remove();
            }
            else if (ctrlType === "layuiRow"){
                var ctrlHtml = ayCtrl.getLayuiRow(ctrlDefine)
                var colHtmlInfo = "";
                
                //循环每个列的信息
                $.each(ctrlDefine.cols,function(i,item){
                    var colHtml = ayCtrl.getLayuiRowCol(item)
                    //当前控件的内部的html
                    var formHtmlOfChild = $("#"+item.id).html();
                    var $colHtml = $(colHtml);
                    $colHtml.html(formHtmlOfChild);
                    var newHtml = $colHtml.prop("outerHTML");
                    colHtmlInfo += newHtml;
                })
                $("#" + ctrlId ).html(colHtmlInfo);
               
            }
            else if (ctrlType === "layuiRowCol"){
                var ctrlHtml = ayCtrl.getLayuiRowCol(ctrlDefine)
                //当前控件的内部的html
                var formHtmlOfChild = $("#"+ctrlId).html();
                var $ctrlHtml = $(ctrlHtml);
                $ctrlHtml.html(formHtmlOfChild);
                var newHtml = $ctrlHtml.prop("outerHTML");
                $("#" + ctrlId ).after(newHtml).remove();
            }


            
        },



        initEvent:function(){
            $("body").on("mouseover",".ctrlItem",function(e){
                var that = this;
                $(this).addClass("ctrlItemOver");
                e.stopPropagation();
            })

            $("body").on("mouseout",".ctrlItem",function(){
                $(this).removeClass("ctrlItemOver")
            })

            $("body").on("click",".ctrlItem",function(e){
                var that = this;
                ayForm.selectedElemId = $(this).attr("id");
                ayForm.selectedCtrlDefine = ayForm.getCtrlObjectById(ayForm.selectedElemId);
                $(this).toggleClass("ctrlItemClick")

                // 递归找到当前控件的路径
                var parentPath = $(that).parents().get().reverse();
                var pathInfo = "路径:";
                $.each(parentPath,function(i,item){
                    var tagName = $(item).prop("tagName");
                    var ctrlId = $(item).attr("id");
                    var ctrlType = $(item).attr("adf-ctrl");
                    if(typeof(ctrlId) === "undefined"){
                        ctrlId = "";
                    }
                    if(typeof(ctrlType) === "undefined"){
                        ctrlType = "";
                    }
                    pathInfo += "<button class='layui-btn layui-btn-xs' data='"+ctrlId+"'>"+tagName+"("+ctrlType+"["+ctrlId+"])"+"</button> > ";
                });

                if(pathInfo.length !== ""){
                    pathInfo = pathInfo.substr(0,pathInfo.length-1);
                }

                $("#elemInfo").html(pathInfo);
                e.stopPropagation();
            })
            
            //用于增加相关的设置
            // 针对比如layuirow 中需要增加一列这样的计算
            $("body").on("click",".btnAddSetup",function(e){
                
                var ctrlType = ayForm.selectedCtrlDefine.ctrlType;
                var ctrlDefine = ayForm.selectedCtrlDefine;
                var ctrlId = ayForm.selectedCtrlDefine.id;

                var opId = $(this).attr("id");
                

                if(opId === "layuiRowAddCol"){
                    console.log("对行增加列");
                    // 表示是增加列
                    //var ctrlObj = ayForm.getCtrlObjectById(ctrlId);
                    var col = ayCtrl.getCtrlDefine("layuiRowCol");
                    col.id = ayCtrl.getNewCtrlId();
                    col.mdNum = 3;
                    ctrlDefine.cols.push(col);

                    $("#ctrlDefine").val(JSON.stringify(ayForm.formStruct));
                    
                    ayForm.saveCtrlProp(ctrlDefine);
                }

                //注册全部的排序
                ayForm.initCtrlSort();


                e.stopPropagation();
            })

            //属性input 编辑区变化
            $("body").on("change","#globalProp input",function(e){
                console.log("change",this);
                var that = this;
                var ctrlType = ayForm.selectedCtrlDefine.ctrlType;
                var ctrlDefine = ayForm.selectedCtrlDefine;
                var ctrlId = ayForm.selectedCtrlDefine.id;

                if(ctrlType === "layuiButton"){
                    if($(that).attr("id") === "caption"){
                        ctrlDefine.caption = $(that).val();
                    }
                } else if(ctrlType === "layuiInput"){
                    if($(that).attr("id") === "name"){
                        ctrlDefine.name = $(that).val();
                    }
                    if($(that).attr("id") === "placeholder"){
                        ctrlDefine.placeholder = $(that).val();
                    }
                    if($(that).attr("id") === "layFilter"){
                        ctrlDefine.layFilter = $(that).val();
                    }

                    if($(that).attr("id") === "layVerify"){
                        ctrlDefine.layVerify = $(that).val();
                    }
                    if($(that).attr("id") === "layIgnore"){
                        ctrlDefine.layIgnore = $(that).val();
                    }
                    if($(that).attr("id") === "layVertype"){
                        ctrlDefine.layVertype = $(that).val();
                    }

                    console.log("layuiinput ctrldefine",ctrlDefine);
                }

                ayForm.saveCtrlProp(ctrlDefine);
                layui.form.render();

            })


            $("body").on("change","#globalProp select",function(){
                var that = this;
                console.log("当前操作的控件json:",ayForm.selectedCtrlDefine);
                console.log("当前变化的元素是",this);

                var ctrlType = ayForm.selectedCtrlDefine.ctrlType;
                var ctrlDefine = ayForm.selectedCtrlDefine;
                var ctrlId = ayForm.selectedCtrlDefine.id;
                
                if(ctrlType === "layuiButton"){
                    if($(that).attr("id") === "theme"){
                        ctrlDefine.theme = $(that).val();
                    }
                    if($(that).attr("id") === "border"){
                        ctrlDefine.border = $(that).val();
                    }
                    if($(that).attr("id") === "size"){
                        ctrlDefine.size = $(that).val();
                    }
                    
                    ayForm.saveCtrlProp(ctrlDefine);
                }

                if(ctrlType === "layuiRow"){
                    
                }

                if(ctrlType === "layuiRowCol"){
                    if($(that).attr("id") === "mdNum"){
                        ctrlDefine.mdNum = $(that).val();
                    }
                    ayForm.saveCtrlProp(ctrlDefine);
                    
                }

                layui.form.render();

            })


            


            //设置属性 btnSetCtrlProp 
            $("body").on("click","#btnSetCtrlProp",function(e){
               
                ayForm.selectedElemId = $("#"+ayForm.selectedElemId).attr("id");
                console.log("ayForm.selectedElemId",ayForm.selectedElemId);
                var ctrlDefine = ayForm.getCtrlObjectById(ayForm.selectedElemId)
                ayForm.setCtrlProp(ctrlDefine);
                e.stopPropagation();
           })

           $("body").on("click","#btnSaveCtrlProp",function(e){
               //ayForm.saveCtrlProp();
               layer.msg("应该使用input的change事件");
          })

            //保存控件定义

            $("body").on("click","#btnSaveCtrlDefine",function(){

                var html = ayForm.generateHtml();
                $("#resultHtml").val(html);
                //var config = JSON.parse($("#ctrlDefine").val());
                //var ctrlId = config.id;
                //插入新的html 同时将自身给移除掉
                //$("#"+ctrlId).after(html).remove();
            })
        },
        putEl:function(to,from,dragEl,event){

            //判断是否可以放入什么样的新元素
            if($(from.el).attr("id") === "leftNav"){
                //表示来源于左侧
                if(!($(to.el).hasClass("canPut"))){
                    //console.log("无移入类，则不能移入");
                    return false;
                }
            } 

            if($(from.el).hasClass("ctrlItem")){
                //
                if(!($(to.el).hasClass("canPut"))){
                    //console.log("无移入类，则不能移入");
                    return false;
                }
            }
            //console.log("允许拖入");
            return true;
        },
        pullEl:function(to,from,dragEl,event){
            var classInfo = $(dragEl).attr("class");
            
            var unCanPullList = "layuiCardHeader,layuiCardBody,unCtrl";
            var ctrlType = $(dragEl).attr("adf-ctrl");

            if(unCanPullList.indexOf(ctrlType+",") > -1){
                return false;
            }

            //console.log("允许拖出");



            return true;
        },
        addEl:function(evt){
            //在设计的元素在各个容器中互相拖动的
            if($(evt.from).attr("id") === "leftNav"){
                ayForm.addElFromLeftNav(evt);
            } 
            else{
                if($(evt.from).attr("adf-ctrl") !== ""){
                    ayForm.addElFromDesign(evt);
                }
            }

            //对当前的表单进行渲染
            layui.form.render();

            return false;

        },
        updateEl : function(evt){
            console.log("update evt",evt);
            /*
            元素在同一个容器中进行移动的时候会触发当前的事件
            如果一个元素从一个容器中拖动到另外一个容器中，则会触发onAdd的事件
            */
            //元素更新时候的操作

            var from = evt.from;
            var to = evt.to;
            var fromId = $(from).attr("id");

            
           
            var itemPropList = "tab";
            var parentObject = ayForm.getCtrlObjectById(fromId);
            var childList = $("#"+fromId).children();
            //对是 childs 子成员按照 html的顺序进行重新排序
            if(ayCtrl.childPropList.indexOf(parentObject.ctrlType+",")>-1){
                var clonedChildren = JSON.parse(JSON.stringify(parentObject.childs));
                parentObject.childs=[];
              

                    $.each(childList,function(i,item){
                        var childId = $(item).attr("id");                  
                        var cloneObj = clonedChildren.find(x=>x.id===childId);
                        parentObject.childs.push(cloneObj);
                    });
            }
            //对是 items 子成员按照 html的顺序进行重新排序
            if(ayCtrl.itemPropList.indexOf(parentObject.ctrlType+",")>-1){
                var clonedChildren = JSON.parse(JSON.stringify(parentObject.items));
                parentObject.items=[];
              

                    $.each(childList,function(i,item){
                        var childId = $(item).attr("id");                  
                        var cloneObj = clonedChildren.find(x=>x.id===childId);
                        parentObject.items.push(cloneObj);
                    });
            }

            //对是 cols 子成员按照 html的顺序进行重新排序
            if(ayCtrl.colsPropList.indexOf(parentObject.ctrlType+",")>-1){
                var clonedChildren = JSON.parse(JSON.stringify(parentObject.cols));
                parentObject.cols=[];
                

                    $.each(childList,function(i,item){
                        var childId = $(item).attr("id");                  
                        var cloneObj = clonedChildren.find(x=>x.id===childId);
                        parentObject.cols.push(cloneObj);
                    });
            }

            $("#ctrlDefine").val(JSON.stringify(ayForm.formStruct));


        },
        addElFromDesign(evt){
           console.log("addElFromDesign",evt);

           /*需要完成的事情
           1、将对应的json对象，移入新的父级对象下
           
           */

           var targetContainer = evt.to;
            var targetId = $(targetContainer).attr("id");
            var targetObj = ayForm.getCtrlObjectById(targetId);
            console.log("targetObj",targetObj);
            if(typeof(targetObj) === "undefined" || targetObj === null){
                layer.msg("父级容器不存在");
                return;
            }
            var targetCtrlType = targetObj.ctrlType;

            //当前移动控件对应的对象
            var dragItem = evt.item;
            var dragItemCtrlType = $(dragItem).attr("adf-ctrl");
            var dragItemId = $(dragItem).attr("id");
            var dragItemObject = ayForm.getCtrlObjectById(dragItemId);

            //得到拖动对象的clone
            var dragItemObjectClone = JSON.parse(JSON.stringify(dragItemObject));
            
            var childList = $("#"+targetId).children();
            if(ayCtrl.childPropList.indexOf(targetObj.ctrlType+",") > -1){
                targetObj.childs.push(dragItemObjectClone);

                //根据当前的元素进行排序
                var clonedChildren = JSON.parse(JSON.stringify(targetObj.childs));
                targetObj.childs=[];
              

                $.each(childList,function(i,item){
                    var childId = $(item).attr("id");                  
                    var cloneObj = clonedChildren.find(x=>x.id===childId);
                    targetObj.childs.push(cloneObj);
                });
            }
            if(ayCtrl.itemPropList.indexOf(targetObj.ctrlType+",") > -1){
                targetObj.items.push(dragItemObjectClone);

                //根据当前的元素进行排序
                var clonedChildren = JSON.parse(JSON.stringify(targetObj.items));
                targetObj.items=[];
            

                $.each(childList,function(i,item){
                    var childId = $(item).attr("id");                  
                    var cloneObj = clonedChildren.find(x=>x.id===childId);
                    targetObj.items.push(cloneObj);
                });
            }

            //处理原有的容器

            var fromContainer = evt.from;
            var fromId = $(fromContainer).attr("id");
            var fromObj = ayForm.getCtrlObjectById(fromId);
            console.log("fromObj",fromObj);

            var fromChildList = $("#" + fromId).children();
            if(ayCtrl.childPropList.indexOf(fromObj.ctrlType+",") > -1){
               

                //根据当前的元素进行排序
                var clonedChildren = JSON.parse(JSON.stringify(fromObj.childs));
                fromObj.childs=[];
              

                $.each(fromChildList,function(i,item){
                    var childId = $(item).attr("id");                  
                    var cloneObj = clonedChildren.find(x=>x.id===childId);
                    fromObj.childs.push(cloneObj);
                });
            }
            if(ayCtrl.itemPropList.indexOf(fromObj.ctrlType+",") > -1){
                
                //根据当前的元素进行排序
                var clonedChildren = JSON.parse(JSON.stringify(fromObj.items));
                fromObj.items=[];

                $.each(fromChildList,function(i,item){
                    var childId = $(item).attr("id");                  
                    var cloneObj = clonedChildren.find(x=>x.id===childId);
                    fromObj.items.push(cloneObj);
                });
            }



            //将原有的进行删除掉
            //ayForm.deleteCtrlObjectById(dragItemId);

            $("#ctrlDefine").val(JSON.stringify(ayForm.formStruct));
        

        },
        addElFromLeftNav:function(evt){

            //这里需要完成的事情,得到控件的配置文件
            //这里是完成控件增加操作，使用的是默认，不涉及控件的参数调整

            var dragItem = evt.item;
            
            var targetContainer = evt.to;
            var targetId = $(targetContainer).attr("id");
            console.log("targetId",targetId);
            var targetObj = ayForm.getCtrlObjectById(targetId);
            if(typeof(targetObj) === "undefined" || targetObj == null){
                layer.msg("父级容器不存在");
                return;
            }

            console.log("目标容器的对象值",targetObj);



            var targetCtrlType = targetObj.ctrlType;            
            //原始先移除掉
            var ctrlType = $(dragItem).attr("ctrl-type");
            $(dragItem).remove();

            //将新的html进行解析
            var newHtml = "";

            //得到类型
            var define = ayCtrl.getCtrlDefine(ctrlType);

            if(typeof(define) === "undefined" || define.ctrlType === ""){
                layer.msg("不存在当前控件");
                return "";
            }

            var newHtml = "";
            if(ctrlType === "button"){
                console.log("加入Button");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getButton(define);
            }
            if(ctrlType === "div"){
                console.log("加入div");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getDiv(define);
            }
            if(ctrlType === "layuiRow"){
                console.log("加入layuiRow");
                define.id = ayCtrl.getNewCtrlId();
                $.each(define.cols,function(i,item){
                    item.id = ayCtrl.getNewCtrlId();
                });

                newHtml = ayCtrl.getLayuiRow(define);
            }

            if(ctrlType === "layuiFormLabel"){
                console.log("layuiFormLabel");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getLayuiFormLabel(define);
            }

            if(ctrlType === "layuiFormItem"){
                console.log("layuiFormItem");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getLayuiFormItem(define);
            }

            if(ctrlType === "layuiRowCol"){
                console.log("加入layuiRowCol");
                define.id = ayCtrl.getNewCtrlId();
                
                newHtml = ayCtrl.getLayuiRowCol(define);
            }

            if(ctrlType === "layuiInput"){
                console.log("加入layuiInput");
                define.id = ayCtrl.getNewCtrlId();
                define.name = define.id;
                newHtml = ayCtrl.getLayuiInput(define);
            }

            if(ctrlType === "layuiCard"){
                console.log("加入layuiCard",define);
                define.id = ayCtrl.getNewCtrlId();
                
                define.header.id = ayCtrl.getNewCtrlId();
                define.body.id = ayCtrl.getNewCtrlId();

                newHtml = ayCtrl.getLayuiCard(define);
            }

            if(ctrlType === "layuiProgress"){
                console.log("加入layuiProgress");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getLayuiProgress(define);
            }

            if(ctrlType === "layuiDatetime"){
                console.log("加入layuiDatetime");
                define.id = ayCtrl.getNewCtrlId();
                define.class = "layui-input";
                define.name = define.id;
                newHtml = ayCtrl.getLayuiDatetime(define);
            }

            if(ctrlType === "layuiBadge"){
                console.log("加入layuiBadge");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getLayuiBadge(define);
            }

            if(ctrlType === "img"){
                console.log("加入img");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getImg(define);
            }

            if(ctrlType === "layuiButton"){
                console.log("加入layuiButton");
                define.id = ayCtrl.getNewCtrlId();
                newHtml = ayCtrl.getLayuiButton(define);
            }

            if(ctrlType === "layuiCheckboxGroup"){
                console.log("layuiCheckboxGroup");
                define.id = ayCtrl.getNewCtrlId();
                define.class = "layui-input";
                define.name = define.id;
                newHtml = ayCtrl.getLayuiCheckboxGroup(define);
            }

            
            if(ctrlType === "layuiRadioGroup"){
                console.log("layuiRadioGroup");
                define.id = ayCtrl.getNewCtrlId();
                define.name = define.id;
                newHtml = ayCtrl.getLayuiRadioGroup(define);
            }

            

            if(ctrlType === "layuiSelect"){
                console.log("layuiSelect");
                define.id = ayCtrl.getNewCtrlId();
                define.class = "";
                define.name = define.id;
                newHtml = ayCtrl.getLayuiSelect(define);
            }

            if(ctrlType === "layuiTextarea"){
                console.log("layuiTextarea");
                define.id = ayCtrl.getNewCtrlId();
                define.class = "";
                define.name = define.id;
                newHtml = ayCtrl.getLayuiTextarea(define);
            }

            if(ctrlType === "layuiTab"){
                console.log("layuiTab");
                define.id = ayCtrl.getNewCtrlId();
                define.class = "";

                $.each(define.items,function(i,item){
                    if(typeof(item.id) === "undefined" || item.id ===""){
                        item.id = ayCtrl.getNewCtrlId();
                    }
                })

                newHtml = ayCtrl.getLayuiTab(define);
            }

            if(ctrlType === "layuiTable"){
                console.log("layuiTable");
                define.id = ayCtrl.getNewCtrlId();
                define.class = "";

                var rowNum = define.rowNum;
                var colNum = define.colNum;

                //
                for(var i = 0; i<rowNum; i++){
                    for(var j=0; j<colNum; j++){
                        var cell = ayCtrl.getCtrlDefine("layuiTableCell");
                        
                        cell.rowIndex = i;
                        cell.colIndex = j;
                        cell.id = ayCtrl.getNewCtrlId();
                        console.log("cell",cell);
                        define.items.push(cell);
                    }
                }

                newHtml = ayCtrl.getLayuiTable(define);
            }

            if(ctrlType === "layuiDataTable"){
                console.log("layuiDataTable");
                define.id = ayCtrl.getNewCtrlId();
                define.class = "";

                newHtml = ayCtrl.getLayuiDataTable(define);
            }

            if(newHtml !== ""){

                $(targetContainer).append(newHtml);

                //如果是datatable 或者 其他需要给当前的控件加入动态脚本
                
                ayForm.LoadScript(define);

                //增加json中
                console.log("增加到json中",targetObj);
                

                var childList = $("#"+targetId).children();
                if(ayCtrl.childPropList.indexOf(targetObj.ctrlType+",") > -1){
                    console.log("childList",childList);
                    targetObj.childs.push(define);

                    //根据当前的元素进行排序
                    var clonedChildren = JSON.parse(JSON.stringify(targetObj.childs));
                    targetObj.childs=[];
                

                    $.each(childList,function(i,item){
                        var childId = $(item).attr("id");                  
                        var cloneObj = clonedChildren.find(x=>x.id===childId);
                        targetObj.childs.push(cloneObj);
                    });

                    console.log("ayForm.formStruct",ayForm.formStruct)
                }
                if(ayCtrl.itemPropList.indexOf(targetObj.ctrlType+",") > -1){
                    targetObj.items.push(define);

                    //根据当前的元素进行排序
                    var clonedChildren = JSON.parse(JSON.stringify(targetObj.items));
                    targetObj.items=[];
                

                        $.each(childList,function(i,item){
                            var childId = $(item).attr("id");                  
                            var cloneObj = clonedChildren.find(x=>x.id===childId);
                            targetObj.items.push(cloneObj);
                        });
                }

               
            }

            ayForm.initCtrlSort();

            $("#ctrlDefine").val(JSON.stringify(ayForm.formStruct));
            
            return "";

        },
        initCtrlSort:function(){
            var ctrlList = document.getElementsByClassName('ctrlItem');
            //console.log("ctrlList",ctrlList);

             // 遍历每个容器并初始化 Sortable
             Array.from(ctrlList).forEach(container => {
                new Sortable(container, {
                    group: {
                            name: 'shared', // 组名
                            pull: function(to,from,dragEl,event){
                                return ayForm.pullEl(to,from,dragEl,event);
                            },     
                            // 允许拖入元素
                            put: function(to,from,dragEl){
                                return ayForm.putEl(to,from,dragEl);
                            }
                        },
                        draggable:".ctrlItem",
                        animation: 150,
                        sort:true,
                        forcePlaceholderSize: true,
                        onAdd:function(evt){
                            console.log("ctrlItem,有新的元素增加进来的事件...");
                            ayForm.addEl(evt);
                        },
                        onUpdate:function(evt){
                            console.log("ctrlItem on update ctrlItem ");
                            ayForm.updateEl(evt);
                            

                        }
                });
            });

        },
        //初始化设计区排序值
        initDesignSortable:function(){
            //初始化排序
            // 初始化右侧
            new Sortable(document.getElementById('designArea'), {
                        group: {
                            name: 'shared', // 组名
                            pull: true,     // 允许拖出元素
                            put: true       // 允许放入元素
                        },
                        animation: 150,
                        draggable:".ctrlItem",
                        sort:true,
                        forcePlaceholderSize: true,
                        onAdd:function(evt){
                            //evt.stopPropagation();
                            ayForm.addEl(evt);
                        },
                        onUpdate:function(evt){
                            console.log("designArea on update ");
                            ayForm.updateEl(evt);
                        }
                    }); 


        },
        LoadScript : function(define){

            var ctrlType = define.ctrlType;
            if(ctrlType === "layuiDataTable"){
                
                layui.table.render({
                    elem : "#table_" + define.id,
                    url: '/layui/sortable/data.json',
                    height: 'full-35',
                    page: true,
                    cols: [[
                            {type: 'checkbox', fixed: 'left'},
                            {field:'ID', fixed: 'left', width:80, title: 'ID', sort: true},
                            {field:'MatterCateName', width:80, title: '分类名称'}
                    ]]

                });
            }

            //日期类需要加载脚本
            if(ctrlType === "layuiDatetime"){
                var type = "date";
                if(typeof(define.type) !== "undefined"){
                    type = define.type;
                }
                layui.laydate.render({
                    elem :"#" + define.id,
                    type:type
                });
            }

        },
        generateHtml : function(){
            //全局ayForm.formStruct 来整体形成html

            function doGen(obj){
                var objHtml = "";
                var ctrlType = obj.ctrlType;
                var elemId = ayCtrl.id;
                console.log("ctrlType",ctrlType);

                switch(ctrlType){
                    case "layuiForm":
                        objHtml = ayCtrl.getLayuiForm(obj);
                    break;
                    case "layuiRow":
                        objHtml = ayCtrl.getLayuiRow(obj);
                    break;
 
                    case "layuiRowCol":
                        objHtml = ayCtrl.getLayuiRowCol(obj);
                    break;
 
                    case "layuiInput":
                        objHtml = ayCtrl.getLayuiInput(obj);
                    break;

                    case "layuiProgress":
                        objHtml = ayCtrl.getLayuiProgress(obj);
                    break;

                    case "layuiDatetime":
                        objHtml = ayCtrl.getLayuiDatetime(obj);
                    break;

                    case "layuiBadge":
                        objHtml = ayCtrl.getLayuiBadge(obj);
                    break;
                    case "img":
                        objHtml = ayCtrl.getImg(obj);
                    break;
                    case "layuiButton":
                        objHtml = ayCtrl.getLayuiButton(obj);
                    break;

                    case "layuiCard":
                        objHtml = ayCtrl.getLayuiCard(obj);
                    break;

                    case "layuiCheckboxGroup":
                        objHtml = ayCtrl.getLayuiCheckboxGroup(obj);
                    break;

                    case "layuiRadioGroup":
                        objHtml = ayCtrl.getLayuiRadioGroup(obj);
                    break;

                    case "layuiTable":
                        objHtml = ayCtrl.getLayuiTable(obj);
                    break;
                    case "layuiDataTable":
                        objHtml = ayCtrl.getLayuiDataTable(obj);
                    break;

                    case "layuiSelect":
                        objHtml = ayCtrl.getLayuiSelect(obj);
                    break;
 
                    case "button":
                        objHtml = ayCtrl.getButton(obj);
                    break;
                    default:
                        break;
                }

                console.log("控件主体html是:",objHtml);
                console.log("obj.childs",obj.childs);
                if(typeof(obj.childs) != "undefined" && obj.childs.length > 0){

                    $.each(obj.childs,function(i,item){
                        console.log("item",item);
                        var chidlHtml = doGen(item);
                        //返回的html是
                        console.log("返回的html是",chidlHtml);
                        objHtml = $(objHtml).append(chidlHtml)[0].outerHTML;
                    })
                }

                return objHtml;


            }

            var html = doGen(ayForm.formStruct);

            return html;


        }

    }

    ayForm.init();

    </script>
</body>
</html>